import { login } from '@/services/sys/LoginService';
import useUserStore from '@/stores/userStore';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import {
  LoginFormPage,
  ProFormCheckbox,
  ProFormText,
} from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { Button, message, theme } from 'antd';
import React from 'react';
type LoginType = 'phone' | 'account';

const LoginIndex: React.FC = () => {
  const userStore = new useUserStore();

  const { initialState, setInitialState } = useModel('@@initialState');

  const { token } = theme.useToken();
  return (
    <div
      style={{
        height: '100vh',
      }}
    >
      <LoginFormPage<API.LoginParams>
        backgroundImageUrl="https://t7.baidu.com/it/u=3757324260,1913739448&fm=193&f=GIF"
        logo="https://github.githubassets.com/favicons/favicon.png"
        /*    backgroundVideoUrl="https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr"*/
        title="圆规"
        containerStyle={{
          backdropFilter: 'blur(4px)',
        }}
        onFinish={async (values) => {
          console.log(values);
          login({ ...values }).then((res) => {
            if (res.status === 200) {
              let data = res.data;

              localStorage.setItem('token', data?.token as string);
              userStore.setUserInfo(data as API.LoginUser);
              // @ts-ignore
              setInitialState((s) => ({ ...s, userInfo: data }));
              message.success('登录成功');
              history.replace('/');
            } else {
              message.error(res.msg);
            }
          });
        }}
        subTitle="全球最大的代码托管平台"
        activityConfig={{
          style: {
            boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
            color: token.colorBgElevated,
            backdropFilter: 'blur(4px)',
          },
          title: '活动标题，可配置图片',
          subTitle: '活动介绍说明文字',
          action: (
            <Button
              size="large"
              style={{
                borderRadius: 20,
                background: token.colorBgElevated,
                color: token.colorPrimary,
                width: 120,
              }}
            >
              去看看
            </Button>
          ),
        }}
      >
        <>
          <ProFormText
            name="userName"
            fieldProps={{
              size: 'large',
              prefix: (
                <UserOutlined
                  style={{
                    color: token.colorText,
                  }}
                  className={'prefixIcon'}
                />
              ),
            }}
            placeholder={'用户名: 13779767672'}
            initialValue={'13779767672'}
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          />
          <ProFormText.Password
            name="password"
            initialValue={'123456'}
            fieldProps={{
              size: 'large',
              prefix: (
                <LockOutlined
                  style={{
                    color: token.colorText,
                  }}
                  className={'prefixIcon'}
                />
              ),
            }}
            placeholder={'密码: 123456'}
            rules={[
              {
                required: true,
                message: '请输入密码！',
              },
            ]}
          />
        </>
        <div
          style={{
            marginBlockEnd: 24,
          }}
        >
          <ProFormCheckbox noStyle name="autoLogin">
            自动登录
          </ProFormCheckbox>
          <a
            style={{
              float: 'right',
            }}
          >
            忘记密码
          </a>
        </div>
      </LoginFormPage>
    </div>
  );
};
export default LoginIndex;
